{extend name="property/public/insidePageBase" /}
{block name="title"}添加财务流水{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main" id="app">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item"> <label class="layui-form-label">流水编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="finance_no" value="{$repairNo ?? ''}" readonly autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收支类型</label>
                        <div class="layui-input-block">
                            <select name="finance_type" lay-verify="required" lay-search>
                                <option value="">直接选择或搜索选择</option>
                                <option value="1" selected>收入</option>
                                <option value="2">支出</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">分类选择</label>
                <div class="layui-input-block">
                    <input type="text" name="cate_id" id="cate-data" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">物业选择</label>
                <div class="layui-input-block">
                    <select name="property_id" lay-filter="property_id" lay-search>
                        <option value="">请选择</option>
                        {foreach $propertyList as $k=>$v}
                        <option value="{$v['id']}">{$v['name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">床位选择</label>
                <div class="layui-input-block" id="room_id_show">
                    <input type="text" name="room_id" disabled id="product-room-data" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item"> <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="start_date"  placeholder="开始时间" class="layui-input  laydate-type-day">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="end_date"  placeholder="结束时间" class="layui-input  laydate-type-day">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item"> <label class="layui-form-label">支付方式</label>
                        <div class="layui-input-block">
                            <select name="pay_method" lay-verify="required" lay-search>
                                <option value="">--请选择--</option>
                                {foreach $payMethodData as $k=>$v}
                                <option value="{$k}">{$v}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付金额</label>
                        <div class="layui-input-block">
                            <input type="text" name="amount"  placeholder="支付金额" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="room_id_tpl" type="text/html">
    <select name="room_id" lay-filter="room_id" id="room_id">
        <option value="">请选择</option>
        {{# layui.each(d.roomList, function(index, elem) { }}
            <option value="{{elem.id}}">{{elem.full_room_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer', 'layCascader','laydate','laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$, layCascader = layui.layCascader,laytpl = layui.laytpl, laydate = layui.laydate;
        laydate.render({
            elem: '.laydate-type-day'
            ,format: 'yyyy-MM-dd'
        });
        layCascader({
            elem: '#cate-data',
            clearable: true,
            value: 0,
            options: {:json_encode($cateNameData,JSON_UNESCAPED_UNICODE)}
        });
        form.on('select(property_id)', function(res) {
            let value = res.value
            loadPropertyRoom(value)
        })
        function loadPropertyRoom(propertyId) {
            $.get('{:request()->url()}', {property_id:propertyId,get_type:'room'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('room_id_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('room_id_show'); // 视图对象
                    laytpl(getTpl).render({roomList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }

            })
        }
    });
</script>
{/block}